import { Component, Vue } from "vue-property-decorator";
import { GlobalStore } from "@/store/global";
import { removeStorage } from "@/utils/storage";
import { FormUtils } from "@/types/form-ref";
import styles from "./style.less";
import code from "@/assets/code.png";
import { DEVICE_TYPE } from "../../utils/device";
import { SystemTitle } from "../../config/index";

@Component({})
export default class Login extends Vue {
    form!: FormUtils;
    loading: any = false;
    isCache: boolean = false;
    getCode() {}
    get isMobile() {
        return GlobalStore.device === DEVICE_TYPE.MOBILE;
    }
    onEnter(e) {
        if (e.keyCode !== 13) {
            return;
        }
        this.login();
    }

    login() {
        this.loading = true;
        this.form.validateFields((err, params) => {
            GlobalStore.login(params).finally(() => (this.loading = false));
            this.$router.push("/");
        });
    }

    beforeCreate() {
        removeStorage();
        (this.form as any) = this.$form.createForm(this);
    }

    toggleAuto(e) {
        this.isCache = e.target.checked;
    }

    render() {
        return (
            <div class={styles.container}>
                <div class={styles.content}>
                    <div class={styles.top}>
                        <div class={styles.header}>
                            <div class={styles.title}>{SystemTitle}</div>
                            <div class={styles.desc}>
                                YJCloud Health Medical Record System
                            </div>
                        </div>
                    </div>
                    <div class={!this.isMobile && styles.login}>
                        <a-form class={styles["login-form"]}>
                            <a-form-item>
                                {this.form.getFieldDecorator("username", {})(
                                    <a-input
                                        v-focus
                                        placeholder="请输入用户名"
                                        prefix={<a-icon type="user" />}
                                    />
                                )}
                            </a-form-item>
                            <a-form-item>
                                {this.form.getFieldDecorator("password", {})(
                                    <a-input
                                        placeholder="请输入密码"
                                        type="password"
                                        onkeydown={this.onEnter}
                                        prefix={<a-icon type="lock" />}
                                    />
                                )}
                            </a-form-item>

                            <a-form-item>
                                <a-row gutter={8} style="margin: 0 -4px">
                                    <a-col span={16}>
                                        {this.form.getFieldDecorator(
                                            "code",
                                            {}
                                        )(
                                            <a-input
                                                placeholder="请输入验证码"
                                                type="text"
                                                prefix={<a-icon type="alert" />}
                                            />
                                        )}
                                    </a-col>
                                    <a-col span={8} style="padding-left: 4px">
                                        <a-tooltip title="看不清？点击刷新验证码。">
                                            <img
                                                src={code}
                                                onclick={this.getCode}
                                                style="width: 100%;cursor:pointer;height:32px;"
                                            />
                                        </a-tooltip>
                                    </a-col>
                                </a-row>
                            </a-form-item>

                            <div style="margin-bottom:16px">
                                <a-checkbox onchange={this.toggleAuto}>
                                    自动登录
                                </a-checkbox>
                                <a style="float: right">忘记密码</a>
                            </div>
                            <a-form-item>
                                <a-button
                                    loading={this.loading}
                                    style="width:100%"
                                    type="primary"
                                    onClick={this.login}
                                >
                                    登录
                                </a-button>
                            </a-form-item>
                        </a-form>
                    </div>
                </div>
            </div>
        );
    }
}
